<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-header timo-card-header">
        <span><i class="fa fa-bars"></i> 工资明细管理</span>
        <i class="layui-icon layui-icon-refresh refresh-btn"></i>
    </div>
    <div class="layui-card-body">

        <div class="layui-row timo-card-screen">
                <div class="pull-left layui-form-pane timo-search-box">
                    <div class="layui-inline">
                        <label class="layui-form-label">发放年月</label>
                        <div class="layui-input-block">
                            <input id="laydate" lay-key="1" readonly="readonly" type="text"
                                   th:value="${param.payDateStr}" name="payDateStr" placeholder="请输入发放年月"
                                   autocomplete="off" class="layui-input">
                        </div>

                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn timo-search-btn">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="pull-right screen-btn-group">
                    <button shiro:hasPermission="business:salary:add" class="layui-btn open-popup" data-title="添加工资明细"
                            th:attr="data-url=@{/business/salary/add}" data-size="auto">
                        <i class="fa fa-plus"></i> 添加
                    </button>
                </div>
            </div>
            <div class="timo-table-wrap">
                <table class="layui-table timo-table">
                    <thead>
                    <tr>
                        <th class="timo-table-checkbox">
                            <label class="timo-checkbox"><input type="checkbox">
                                <i class="layui-icon layui-icon-ok"></i></label>
                        </th>

                        <th>工资金额</th>
                        <th>发放日期</th>
                        <th>人员姓名</th>
                        <th>人员ID</th>
                        <th>备注</th>
                        <th shiro:hasPermission="business:salary:edit">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="item:${list}">
                        <td><label class="timo-checkbox"><input type="checkbox" th:value="${item.id}">
                            <i class="layui-icon layui-icon-ok"></i></label></td>
                        <td th:text="${item.money}">工资金额</td>
                        <td th:text="${#dates.format(item.payDate, 'yyyy-MM-dd')}">发放年月</td>
                        <td th:text="${item.userName}">人员姓名</td>
                        <td th:text="${item.userId}">人员ID</td>
                        <td th:text="${item.remark}">备注</td>
                        <td shiro:hasPermission="business:salary:edit">
                            <a th:attr="data-url=@{'/business/salary/edit/'+${item.id}}" data-size="auto"
                               href="#">编辑</a>
                            <a class="ajax-get" data-msg="您是否确认删除"
                               th:href="@{'/business/salary/delete/'+${item.id}}">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div th:replace="/common/my_fragment :: page"></div>
        </div>
    </div>
<script th:replace="/common/template :: script"></script>
<script th:inline="javascript">
    layui.use(['element', 'laydate', 'form'], function () {
        var $ = layui.jquery;
        var dv = $(".dict-value");
        $(window).on("resize", function () {
            var width = $("body").width();
            if (width > 1200) {
                dv.css("max-width", width * 0.32);
            } else {
                dv.css("max-width", width * 0.20);
            }
            }).resize();
            var laydate = layui.laydate;
            laydate.render({
                elem:'#laydate',
                type:'month'

            });
        });
    </script>
</body>
</html>